<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" size="mini" class="form-filter">
            <el-form-item label="商品类型">
                <el-select
                    v-model="filter.goodsTypeId"
                    filterable
                    placeholder="请选择"
                    style="width:200px;"
                    @change="getPage"
                    clearable
                >
                    <el-option
                        v-for="item in goodsTypeAllList"
                        :key="item.id"
                        :label="item.goodsTypeName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="品牌" prop="brandId" size="mini">
                <el-select v-model="filter.brandId" placeholder="请选择" @change="getPage" clearable>
                    <el-option
                        v-for="item in brandList"
                        :key="item.id"
                        :label="item.brandName"
                        :value="item.id"
                        clearable
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="类型" prop="specType" size="mini">
                <el-select v-model="filter.specType" placeholder="请选择" @change="getPage" clearable>
                    <el-option key="1" label="规格" value="1"/>
                    <el-option key="2" label="参数" value="2"/>
                </el-select>
            </el-form-item>

            <el-form-item label="检索" prop="filterCondition" size="mini">
                <el-select v-model="filter.filterCondition" placeholder="请选择" @change="getPage" clearable>
                    <el-option :key="true" label="是" :value="true"/>
                    <el-option :key="false" label="否" :value="false"/>
                </el-select>
            </el-form-item>

            <el-form-item label="名称">
                <el-input v-model="filter.specName" placeholder="请输入条件查询"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                <el-button @click="showUpdate({})" icon="el-icon-plus">添加</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :cell-class-name="getCellIndex"
                @cell-click="tableDbEdit"
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column  prop="specId" label="ID" width="60"/>
                <el-table-column prop="goodsTypeName" label="类型名称"/>
                <el-table-column prop="brandName" label="品牌名称"/>
                <el-table-column prop="specName" label="规格名称"/>
                <el-table-column width="80" label="类型">
                    <template #default="scope">
                        <el-tag :type="scope.row.specTypeStyle">
                            {{ scope.row.specTypeName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="检索">
                    <template #default="scope">
                        <el-tag :type="scope.row.filterCondition?'danger':'info'">
                            {{ scope.row.filterCondition?'是':'否' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="sort" sortable label="排序" width="80px">
                    <template #default="scope">
                    <span v-show="!(scope.row.index == coordinate.row && scope.column.index ==coordinate.column)">
                      {{ scope.row.sort }}
                    </span>
                        <el-input
                            v-show="scope.row.index == coordinate.row && scope.column.index ==coordinate.column"
                            ref="sort"
                            v-model="scope.row.sort"
                            size="mini"
                            autofocus
                            @change="submitTableEdit(scope.row)"
                        />
                    </template>
                </el-table-column>

                <el-table-column prop="updateName" label="更新人"/>
                <el-table-column prop="updateTime" label="更新时间"/>

                <el-table-column fixed="right" label="操作" width="250">
                    <template #default="scope">
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdateSpecValue(scope.row)">
                            规格项
                        </el-button>
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.specId)">
                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
            <Update ref="updateRef" @refresh="getPage()"/>
            <UpdateSpecValue ref="updateSpecValueRef" @refresh="getPage()"/>
        </div>
    </section>
</template>
<script>
import {SpecApi} from '@/api/mall/spec'
import {BrandApi} from '@/api/mall/brand'
import {GoodsTypeApi} from '@/api/mall/goodsType'
import Update from './Update.vue'
import UpdateSpecValue from './UpdateSpecValue.vue'

export default {
    name: 'MallSpecList',
    components: {
        Update, UpdateSpecValue
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {
                goodsTypeId: '',
                brandId: '',
                specType: '',
                filterCondition:null,
                specName: ''
            },
            loading: false,
            goodsTypeAllList: [],
            brandList: [],
            coordinate: {column: -1, row: -1},
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        GoodsTypeApi.getAllList().then((response) => {
            this.goodsTypeAllList = response
        }).catch((err) => {
        })

        BrandApi.getAllList().then((response) => {
            this.brandList = response
        })

        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                goodsTypeId: this.filter.goodsTypeId,
                brandId: this.filter.brandId,
                specType: this.filter.specType,
                filterCondition: this.filter.filterCondition,
                specName: this.filter.specName
            }

            this.loading = true
            SpecApi.getPage(params).then((response) => {
                this.page = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        // 删除数据
        handleDelete(specId) {
            SpecApi.delete(specId).then((response) => {
                this.getPage()
            })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        showUpdate(data) {
            this.$refs['updateRef'].showUpdate(data)
        },

        showUpdateSpecValue(data) {
            this.$refs['updateSpecValueRef'].showUpdate(data)
        },
        getCellIndex({row, column, rowIndex, columnIndex}) {
            row.index = rowIndex
            column.index = columnIndex
        },
        tableDbEdit(row, column) {
            this.coordinate.row = row.index
            this.coordinate.column = column.index
        },
        submitTableEdit(row) {
            this.coordinate.column = -1
            this.coordinate.row = -1
            const params = {
                specId: row.specId,
                sort: row.sort
            }
            SpecApi.updateSort(params).then((response) => {
            })
        }
    }
}

</script>

<style lang="scss" scoped></style>
